<script setup>

import router from "@/router";
import { ref } from 'vue';

const images = ref([
  { id: 1, src: "/imgs/医疗轮播2.jpeg" },
  { id: 2, src: '/imgs/家政轮播.jpeg' },
  { id: 3, src: '/imgs/医疗轮播2.jpeg' },
  { id: 4, src: '/imgs/家政轮播.jpeg' }
]);


</script>

<template>

    <el-container style="background-color: gainsboro ">
      <el-header class="header" style="background-color: #f59e34 ">
        <el-row type="flex" align="middle" >
          <el-col :span="8">
            <el-row type="flex" align="middle" >
              <el-col :span="6" class="image-col">
                <div class="image-container">
                <img src="/imgs/admin/趣home-01.png" alt="趣home-01" class="image">
                </div>
              </el-col>
              <el-col :span="1">
                <img src="/imgs/login/verticalLine.png" style="height: 50px;width: 100%">
              </el-col>
              <el-col :span="15">
                <span style="color:black;font-weight: bold;font-size: 30px;">居家养老服务平台</span>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="16">
            <el-row type="flex" align="middle">
              <el-col :span="20">
                <el-row >
                  <el-col :span="3"><span @click="router.push('/look')">首页</span></el-col>
                  <el-col :span="3"><span @click="router.push('/homeService')">家政服务</span></el-col>
                  <el-col :span="3"><span @click="router.push('/doctorService')">医疗服务</span></el-col>
                </el-row>
              </el-col>
              <el-col :span="4">
                <el-dropdown style="position: absolute;right: 30px ; bottom: 2px; top:0px;" trigger="click">
                  <!-- trigger="click" 用于点击退出登录，只有在点击时才可以弹出下拉菜单-->
                  <span style="font-size: 19px;font-weight: bold;">
                <!-- 已经在HomeView.vue中进行了获取（const user=ref(getUser());），因此在这里直接进行显示 -->
                <el-icon :size="30"><Avatar /></el-icon>
              </span>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item @click="router.push('/login')">登录</el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </el-col>
            </el-row>
          </el-col>
        </el-row>

      </el-header>
      <el-main class="main">
      <!--   小卡片-->
        <el-carousel :interval="5000" arrow="always">
          <el-carousel-item v-for="image in images" :key="image.id">
            <img :src="image.src" alt="Carousel Image" class="carousel-image"
                 style=" width: 100%;object-fit: cover;"/>
          </el-carousel-item>
        </el-carousel>
        <el-card style="margin: 20px;">
        <el-row :gutter="10">
          <!-- 定义相对定位和绝对定位，将此项固定在右侧，就不会受到影响 -->
          <el-col :span="6" style="position: relative">
            <div class="service-card" >
              <img src="/imgs/摄图网_600614953_厨房的洗菜盆(仅交流学习使用).jpg" alt="Service Icon" class="service-icon" style="width: 40vh;">
            </div>
          </el-col>
          <el-col :span="12" style="position: relative">
            <div class="service-card">
              <h3>家政服务</h3>
              <p>提供专业、安全、便捷的家政服务，为老人提供安全、便捷的居住环境。</p>
            </div>
          </el-col>
          <el-col :span="6" style="position: relative">
            <el-row>
              <el-col :span="12" style="position: relative">
                <div class="service-card" >
                  <img src="/imgs/摄图网_600614953_厨房的洗菜盆(仅交流学习使用).jpg" alt="Service Icon" class="service-icon" style="width: 20vh;">
                </div>
              </el-col>
              <el-col :span="12" style="position: relative">
                <div class="service-card" >
                  <img src="/imgs/摄图网_600614953_厨房的洗菜盆(仅交流学习使用).jpg" alt="Service Icon" class="service-icon" style="width: 20vh;">
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12" style="position: relative">
                <div class="service-card" >
                  <img src="/imgs/摄图网_600614953_厨房的洗菜盆(仅交流学习使用).jpg" alt="Service Icon" class="service-icon" style="width: 20vh;">
                </div>
              </el-col>
              <el-col :span="12" style="position: relative">
                <div class="service-card" >
                  <img src="/imgs/摄图网_600614953_厨房的洗菜盆(仅交流学习使用).jpg" alt="Service Icon" class="service-icon" style="width: 20vh;">
                </div>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        </el-card>

        <el-card style="margin: 20px;">
          <el-row :gutter="10">
            <!-- 定义相对定位和绝对定位，将此项固定在右侧，就不会受到影响 -->
            <el-col :span="6" style="position: relative">
              <div class="service-card" >
                <img src="/imgs/摄图网_600614953_厨房的洗菜盆(仅交流学习使用).jpg" alt="Service Icon" class="service-icon" style="width: 40vh;">
              </div>
            </el-col>
            <el-col :span="12" style="position: relative">
              <div class="service-card">
                <h3>医疗服务</h3>
                <p>提供专业、安全、便捷的家政服务，为老人提供安全、便捷的居住环境。</p>
              </div>
            </el-col>
            <el-col :span="6" style="position: relative">
              <el-row>
                <el-col :span="12" style="position: relative">
                  <div class="service-card" >
                    <img src="/imgs/摄图网_600614953_厨房的洗菜盆(仅交流学习使用).jpg" alt="Service Icon" class="service-icon" style="width: 20vh;">
                  </div>
                </el-col>
                <el-col :span="12" style="position: relative">
                  <div class="service-card" >
                    <img src="/imgs/摄图网_600614953_厨房的洗菜盆(仅交流学习使用).jpg" alt="Service Icon" class="service-icon" style="width: 20vh;">
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12" style="position: relative">
                  <div class="service-card" >
                    <img src="/imgs/摄图网_600614953_厨房的洗菜盆(仅交流学习使用).jpg" alt="Service Icon" class="service-icon" style="width: 20vh;">
                  </div>
                </el-col>
                <el-col :span="12" style="position: relative">
                  <div class="service-card" >
                    <img src="/imgs/摄图网_600614953_厨房的洗菜盆(仅交流学习使用).jpg" alt="Service Icon" class="service-icon" style="width: 20vh;">
                  </div>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </el-card>

        <el-card style="margin: 20px;">
          <el-row :gutter="10">
            <!-- 定义相对定位和绝对定位，将此项固定在右侧，就不会受到影响 -->
            <el-col :span="6" style="position: relative">
              <div class="service-card" >
                <img src="/imgs/摄图网_600614953_厨房的洗菜盆(仅交流学习使用).jpg" alt="Service Icon" class="service-icon" style="width: 40vh;">
              </div>
            </el-col>
            <el-col :span="12" style="position: relative">
              <div class="service-card">
                <h3>保障服务</h3>
                <p>提供专业、安全、便捷的家政服务，为老人提供安全、便捷的居住环境。</p>
              </div>
            </el-col>
            <el-col :span="6" style="position: relative">
              <el-row>
                <el-col :span="12" style="position: relative">
              <div class="service-card" >
                <img src="/imgs/摄图网_600614953_厨房的洗菜盆(仅交流学习使用).jpg" alt="Service Icon" class="service-icon" style="width: 20vh;">
              </div>
                </el-col>
                <el-col :span="12" style="position: relative">
                  <div class="service-card" >
                    <img src="/imgs/摄图网_600614953_厨房的洗菜盆(仅交流学习使用).jpg" alt="Service Icon" class="service-icon" style="width: 20vh;">
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12" style="position: relative">
                  <div class="service-card" >
                    <img src="/imgs/摄图网_600614953_厨房的洗菜盆(仅交流学习使用).jpg" alt="Service Icon" class="service-icon" style="width: 20vh;">
                  </div>
                </el-col>
                <el-col :span="12" style="position: relative">
                  <div class="service-card" >
                    <img src="/imgs/摄图网_600614953_厨房的洗菜盆(仅交流学习使用).jpg" alt="Service Icon" class="service-icon" style="width: 20vh;">
                  </div>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </el-card>
      </el-main >
      <el-footer class="footer" >
        <div class="services">
          <h2>我们的服务</h2>
        </div>
        <el-row type="flex" justify="center" align="middle">
          <el-col :span="12">
            <p>版权所有 © 2023 居家养老服务平台</p>
            <p>联系电话：123-456-7890</p>
          </el-col>
          <el-col :span="12">
            <p>邮箱：info@homecare.com</p>
            <p>关注我们：
              <a href="#" class="social-link">微博</a> |
              <a href="#" class="social-link">微信</a>
            </p>
          </el-col>
        </el-row>
      </el-footer>
    </el-container>
</template>

<style scoped>
.footer {
  background-color: #f59e34; /* 淡黄色 */
  color: #333; /* 文字颜色 */
}
.services h2 {
  margin-bottom: 20px; /* 标题与内容之间的间距 */
}
.social-link {
  text-decoration: none;
  color: #409eff;
}
.image-col {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50%;
}

.image-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.image {
  height: 50px; /* 调整图片高度 */
  width: auto; /* 保持图片比例 */
  max-width: 100%; /* 确保图片不会超出容器宽度 */
  padding-top: 10px;
}
</style>